<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://qjstatic.oss-cn-shanghai.aliyuncs.com/axios.min.js"></script>
    <!-- 要在element ui之前引入vue2 -->
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入网页标题图标 -->
    <link rel="shortcut icon" href="./imgs/sub.png" type="image/x-icon">
    <title>申请</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .el-input-group__append,
        .el-input-group__prepend {
            background-color: #ffffff !important;
            color: #000000;
            vertical-align: middle;
            display: table-cell;
            position: relative;
            border-radius: 4px;
            padding: 0 20px;
            width: 1px;
            white-space: nowrap;
        }

        #bigdiv666 {
            width: 100vw;
            height: 100vh;
            overflow-x: hidden;
            background-color: #f9fafb;
        }

        .pcimg {
            max-width: 100%;
            height: auto;
            cursor: pointer;
        }

        .lijiapply {
            width: 12%;
            height: 8%;
            position: relative;
            left: 7.8%;
            bottom: 23.7%;
            cursor: pointer;
        }

        .whiteformdiv {
            width: 100%;
            height: 60%;
            position: relative;
            bottom: 8vh;
            background-color: #f9fafb;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .div2 {
            /* 1200px是蓝湖原型某一个div的宽，1920px是原型设备的宽 */
            width: calc((1200/1920)*100vw);
            height: 70%;
            background-color: #ffffff;
            border-radius: 1vh;
        }

        .div3 {
            display: flex;
            width: 100%;
            height: 70%;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
        }

        .everyinputdiv {
            width: 35%;
        }

        .btndiv {
            width: 100%;
            height: 40%;
            background-color: #359aac;
            border-bottom-left-radius: 1vh;
            border-bottom-right-radius: 1vh;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
        }

        .showsuccess {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(100, 100, 100, 0.3);
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-content: center;
            flex-wrap: wrap;
        }

        .div4 {
            width: calc((680/1920)*100vw);
            height: calc((348/1668)*100vh);
            background-color: #ffffff;
            border-radius: 1vh;
        }

        .div5 {
            width: 95%;
            padding-top: 2vh;
            display: flex;
            justify-content: flex-end;
            font-size: calc((20/1920)*100vw);
        }

        .div5 span {
            cursor: pointer;
            color: grey;
        }

        .div6 {
            width: calc((528/1920)*100vw);
            height: calc((88/1668)*100vh);
            margin: auto;
            font-size: calc((16/1920)*100vw);
            color: #394259;
        }

        .div7 {
            width: 90%;
            height: 15%;
            margin: auto;
            font-size: calc((36/1920)*100vw);
            font-weight: 500;
            line-height: calc((36/1920)*100vw);
            color: #183F49;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 6%;
        }

        .div7 img {
            width: calc((36/1920)*100vw);
            margin-right: calc((16/1920)*100vw);
        }

        .showsuccess2 {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(100, 100, 100, 0.3);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            flex-wrap: wrap;
            z-index: 1000000000000;
            align-items: center;
        }

        .phoneshowclosedad {
            width: 100vw;
            display: flex;
            justify-content: center;
            padding-top: calc((32/1255)*100vh);
        }

        .phoneshowclose {
            width: calc((30/375)*100vw);
            height: calc((30/375)*100vw);
            border-radius: 50%;
            background-color: #474747;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            cursor: pointer;
        }

        .showsuccess2 .div4 {
            width: calc((311/375)*100vw);
            height: calc((350/1255)*100vh);
            background-color: #ffffff;
            border-radius: calc((8/375)*100vw);
        }

        .showsuccess2 .div5 {
            width: 100%;
            padding-top: 2vh;
            display: flex;
            justify-content: flex-end;
        }

        .showsuccess2 .div5 span {
            cursor: pointer;
            color: grey;
        }

        .showsuccess2 .div5 img {
            width: calc((48/375)*100vw);
            margin: auto;
        }

        .showsuccess2 .div6 {
            width: calc((247/375)*100vw);
            height: calc((126/1255)*100vh);
            margin: auto;
            font-size: calc((14/375)*100vw);
            color: #394259;
            line-height: calc((25/1255)*100vh);
        }

        .showsuccess2 .div7 {
            width: 90%;
            height: 15%;
            margin: auto;
            font-size: calc((18/375)*100vw);
            color: #183F49;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: calc((28/1255)*100vh);
        }

        #phonebigdiv {
            width: 100%;
            overflow-x: hidden;
            overflow-y: hidden;
            background-repeat: no-repeat;
            position: relative;
        }

        #phoneback {
            max-width: 100vw;
            height: auto;
            position: relative;
        }

        #i1 {
            max-width: 100vw;
            height: auto;
            position: absolute;
            z-index: 10000;
            margin: auto;
            top: 13vh;
        }

        .whiteinputphone {
            background-color: #fff;
            width: calc((343/375)*100vw);
            height: calc((488/1255)*100vh);
            position: absolute;
            z-index: 10000;
            margin: auto;
            top: 100vh;
            left: calc((16/375)*100vw);
            display: flex;
            align-content: space-around;
            flex-direction: column;
            border-radius: 2%;
        }

        .el-input__inner {
            appearance: none;
            background-color: rgb(255, 255, 255);
            background-image: none;
            box-sizing: border-box;
            color: rgb(96, 98, 102);
            display: inline-block;
            height: calc((48/1255)*100vh);
            line-height: 40px;
            width: 100%;
            border-radius: 4px;
            border-width: 1px;
            border-style: solid;
            border-color: rgb(220, 223, 230);
            border-image: initial;
            outline: 0px;
            padding: 0px 15px;
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        }

        .whiteinputphone p {
            width: calc((311/375)*100vw);
            font-size: calc((16/375)*100vw);
            margin: auto;
        }

        .everyinputdiv2 {
            width: calc((311/375)*100vw);
            margin: auto;
        }

        .b1,
        .b2,
        .b3,
        .b4 {
            position: relative;
        }

        .phonebtn2 {
            cursor: pointer;
            margin: auto;
            width: 50%;
            margin-bottom: 1%;
        }

        #phoneinto {
            max-width: 100%;
            height: auto;
            cursor: pointer;
        }

        /* 手机的情况下显示正方形的，pc就默认原生的长方形 */
        @media screen and (max-width: 370px) {
            .el-message {
                min-width: 30vw !important;
                max-height: 255px;
                background: #fff !important;
                border-color: #fff !important;
                display: inline-block !important;
                padding: 14px;
                text-align: center;
                top: 40% !important;
                box-shadow: 0px 1px 4px 0px rgba(119, 121, 121, 0.4);
            }

            .el-message__icon {
                width: 48px;
                height: 48px;
                font-size: 28px !important;
                /* 成功图标的大小 */
                margin-right: 0 !important;
                float: left;
                margin-left: calc(50% - 24px);
            }

            .el-icon-warning {
                color: #FF6363;
            }

            .el-icon-success {
                color: #49C3BF !important;
            }

            .el-message-title-top {
                font-size: 10px;
                font-family: NotoSansHans;
                color: rgba(51, 51, 51, 1);
                margin-top: 48px;
            }

            .el-message-title-bottom {
                font-size: 14px;
                font-family: NotoSansHans;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- pc端自适应 -->
        <div id="bigdiv666" v-show="isshowpc">
            <img class="pcimg" :src="pcimg" @click="lijiapply" alt="">
            <!--pc端 下面的表单 -->
            <div class="whiteformdiv">
                <div class="div2">
                    <div class="div3">
                        <div class="everyinputdiv">
                            <el-input placeholder="请输入企业名称" v-model="qymc">
                                <template slot="prepend">企业名称</template>
                            </el-input>
                            <p v-show="s1" style="color: red;">请输入企业名称</p>
                        </div>
                        <div class="everyinputdiv">
                            <el-input placeholder="请输入姓名" v-model="sqlxr">
                                <template slot="prepend">申请联系人</template>
                            </el-input>
                            <p v-show="s2" style="color: red;">请输入联系人姓名</p>
                        </div>
                        <div class="everyinputdiv">
                            <el-input placeholder="请输入11位手机号码" v-model="lxrsjh">
                                <template slot="prepend">联系人手机号</template>
                            </el-input>
                            <p v-show="s3" style="color: red;">请输入联系人11位手机号</p>
                        </div>
                        <div class="everyinputdiv">
                            <el-input placeholder="人民币" type="number" :min="0" v-model="qwsqed">
                                <template slot="prepend">期望申请额度</template>
                                <template slot="append">元</template>
                            </el-input>
                            <p v-show="s4" style="color: red;">请输入期望申请额度</p>
                        </div>
                    </div>
                    <!-- 按钮div  -->
                    <div class="btndiv">
                        <!-- <el-button @click="applyedit" style="background-color: #278191;color: #ffffff;" round>
                            修改申请信息</el-button> -->
                        <el-button @click="makesureSubmit" style="background-color: #ffffff;color: #0b4f5c;"
                            round>提交申请</el-button>
                    </div>
                </div>
            </div>
            <!--pc端 弹窗显示 -->
            <div v-show="isshowsuccess" class="showsuccess">
                <div class="div4">
                    <div class="div5">
                        <span @click="closeisshowsuccess">╳</span>
                    </div>
                    <div class="div7">
                        <img :src="subimg" alt="">
                        <span>申请提交成功</span>
                    </div>
                    <div class="div6">
                        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 国信中心的工作人员将在1-2个工作日内联系您，并请您授权工作人员
                        使用国信中心数据库中您的企业经营数据
                        以及提交您的企业征信报告和法人代表个人征信报告，通过的话，我们将在1- 2周左右完成放款，谢谢!
                    </div>
                </div>
            </div>
        </div>
        <!-- 移动端自适应 -->
        <div id="phonebigdiv" v-show="!isshowpc">
            <!-- 移动端入口图片 -->
            <img id="phoneinto" :src="phoneinto" v-show="isintophone" @click="lijiintophone" alt="">
            <!-- 移动端背景图片 -->
            <img id="i1" :src="i1" v-show="!isintophone" alt="">
            <img id="phoneback" :src="phoneback" v-show="!isintophone" alt="">
            <!-- 移动端表单 -->
            <div class="whiteinputphone" v-show="!isintophone">
                <p>企业名称 <span v-show="s1" style="color: red;font-size: 12px;">请输入企业名称</span></p>
                <div class="everyinputdiv2 b1">
                    <el-input placeholder="请输入企业名称" v-model="qymc">
                    </el-input>
                </div>
                <p>申请联系人 <span v-show="s2" style="color: red;font-size: 12px;">请输入联系人姓名</span></p>
                <div class="everyinputdiv2 b2">
                    <el-input placeholder="请输入姓名" v-model="sqlxr">
                    </el-input>
                </div>
                <p>联系人手机号 <span v-show="s3" style="color: red;font-size: 12px;">请输入11位手机号</span></p>
                <div class="everyinputdiv2 b3">
                    <el-input placeholder="请输入11位手机号码" v-model="lxrsjh">
                    </el-input>
                </div>
                <p>期望申请额度 <span v-show="s4" style="color: red;font-size: 12px;">请输入期望申请额度</span></p>
                <div class="everyinputdiv2 b4">
                    <el-input placeholder="人民币" type="number" :min="0" v-model="qwsqed">
                        <template slot="append">元</template>
                    </el-input>
                </div>
                <div class="phonebtn2" v-show="!isintophone">
                    <el-button @click="makesureSubmit" style="background-color: #267f8f;color: white;width: 100%;"
                        round>提交申请</el-button>
                </div>
            </div>

            <!--移动端 弹窗显示 -->
            <div v-show="isshowsuccess" class="showsuccess2">
                <div class="div4">
                    <div class="div5">
                        <img :src="subimg" alt="">
                    </div>
                    <div class="div7">
                        <span>申请提交成功</span>
                    </div>
                    <div class="div6">
                        国信中心的工作人员将在1-2个工作日内联系您，并请您授权工作人员
                        使用国信中心数据库中您的企业经营数据
                        以及提交您的企业征信报告和法人代表个人征信报告，通过的话，我们将在1- 2周左右完成放款，谢谢!
                    </div>
                </div>
                <div class="phoneshowclosedad">
                    <div class="phoneshowclose" @click="closeisshowsuccess">╳</div>
                </div>
            </div>
        </div>
    </div>

    <script>

        var app = new Vue({
            el: '#app',
            data() {
                return {
                    isshowpc: true,
                    pcimg: './imgs/PCinto.png',
                    i1: './imgs/i1.png',
                    phoneback: './imgs/i2.png',
                    subimg: './imgs/sub.png',
                    phoneinto: './imgs/phoneinto.png',
                    qymc: '',
                    sqlxr: '',
                    lxrsjh: '',
                    qwsqed: '',
                    isshowsuccess: false,
                    s1: false,
                    s2: false,
                    s3: false,
                    s4: false,
                    isintophone: true,
                };
            },
            mounted() {
                //第一次进入如果是手机则手机宽否则pc
                var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                if (screenWidth <= 568) {
                    console.log("当前屏幕是手机屏幕");
                    this.isshowpc = false
                } else {
                    console.log("当前屏幕不是手机屏幕");
                    this.isshowpc = true
                }
                window.addEventListener('resize', this.checkScreenWidth);
            },
            methods: {
                //立即申请按钮
                lijiapply() {
                    console.log('点击了立即申请按钮');
                    let bigdiv666 = document.getElementById('bigdiv666')
                    bigdiv666.scrollTop = bigdiv666.scrollHeight;
                },
                //确认信息并提交申请
                makesureSubmit() {
                    console.log('确认信息并提交申请');
                    let searchParams = window.location.href;
                    console.log('searchParams:', searchParams);
                    let memberNameRegex = /memberName=([^&]+)/;
                    let memberCodeRegex = /memberCode=([^&]+)/;
                    let memberNameMatch = searchParams.match(memberNameRegex);
                    let memberCodeMatch = searchParams.match(memberCodeRegex);
                    let memberName = memberNameMatch ? decodeURIComponent(memberNameMatch[1]) : null;
                    let memberCode = memberCodeMatch ? decodeURIComponent(memberCodeMatch[1]) : null;
                    console.log('memberName:', memberName);
                    console.log('memberCode:', memberCode);
                    function encode(param) {
                        try {
                            if (param.constructor === Object) {
                                return encode(JSON.stringify(param));
                            }
                            if (param.constructor === Function) {
                                return encode(param());
                            }
                        } catch (e) {
                            console.log(`param encode error: `, param);
                            return param;
                        }
                        return encodeURI(param);
                    }
                    let parmas = {
                        paramStr: JSON.stringify({
                            "questproCode": "word", "questtempCode": "92fb3a70b17d41f08a1602d1412455ca",
                            "memberName": memberName, "memberCode": memberCode, "userName": this.sqlxr, "userCode": this.lxrsjh,
                            "questtempName": "金融服务预约", "questtempType": "1",
                            "qtQuestuserValueDomainList":
                                [{
                                    "questtempListCode": "03", "questproCode": "word",
                                    "questtempListName": "申请公司", "questuserValueValue": this.qymc,
                                    "questproType": "2"
                                },
                                {
                                    "questtempListCode": "01", "questproCode": "word",
                                    "questtempListName": "申请联系人", "questuserValueValue": this.sqlxr,
                                    "questproType": "2"
                                }, {
                                    "questtempListCode": "04", "questproCode": "phone",
                                    "questtempListName": "联系电话", "questuserValueValue": this.lxrsjh,
                                    "questproType": "3"
                                },
                                {
                                    "questtempListCode": "02", "questproCode": "word", "questtempListName": "申请金额(元)",
                                    "questuserValueValue": this.qwsqed,
                                    "questproType": "2"
                                }]
                        })
                    }
                    const uri = new URLSearchParams(parmas);
                    // Loop Uri
                    for (let value of uri.values()) {
                        value = encode(value);
                    }
                    if (this.qymc == '') {
                        this.s1 = true
                    }
                    if (this.sqlxr == '') {
                        this.s2 = true
                    }
                    if (this.lxrsjh == '') {
                        this.s3 = true
                    }
                    if (this.qwsqed <= 0) {
                        this.s4 = true
                    }

                    let url = new URL(window.location.href);
                    let protocolAndDomain = url.protocol + "//" + url.hostname;//域名配置的时候就是指定了服务器的ip和端口号，域名=ip+端口号
                    console.log('当前网站的协议和域名', protocolAndDomain);//https://appshop.saas.qjclouds.com


                    if (this.sqlxr != '' && this.qymc != '' && this.lxrsjh != '' && this.lxrsjh.length == 11 && this.qwsqed >= 0) {
                        axios.post(protocolAndDomain + '/web/qt/Questuser/saveQuestuser.json', uri,
                            {
                                headers: {
                                    // 'Content-Type': 'application/json;charset=UTF-8',
                                    // 'Content-Type': 'application/x-www-form-urlencoded',
                                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                                    'saas-Agent': 'Windows NT,Macintosh',
                                }
                            }
                        ).then((res) => {
                            console.log('确认信息并提交申请:', res);
                            if (res.data.success === true) {
                                this.isshowsuccess = true
                            } else {
                                this.$message({
                                    message: '申请失败',
                                    dangerouslyUseHTMLString: true,
                                    duration: 1000,
                                    type: 'warning'
                                })
                            }
                        }).catch((err) => {
                            this.$message({
                                message: '申请失败',
                                dangerouslyUseHTMLString: true,
                                duration: 1000,
                                type: 'warning'
                            })
                        })
                    }
                },
                //申请修改
                applyedit() {
                    console.log('申请修改');
                    let searchParams = window.location.href;
                    console.log('searchParams:', searchParams);
                    let memberNameRegex = /memberName=([^&]+)/;
                    let memberCodeRegex = /memberCode=([^&]+)/;
                    let memberNameMatch = searchParams.match(memberNameRegex);
                    let memberCodeMatch = searchParams.match(memberCodeRegex);
                    let memberName = memberNameMatch ? decodeURIComponent(memberNameMatch[1]) : null;
                    let memberCode = memberCodeMatch ? decodeURIComponent(memberCodeMatch[1]) : null;
                    console.log('memberName:', memberName);
                    console.log('memberCode:', memberCode);
                    function encode(param) {
                        try {
                            if (param.constructor === Object) {
                                return encode(JSON.stringify(param));
                            }

                            if (param.constructor === Function) {
                                return encode(param());
                            }
                        } catch (e) {
                            console.log(`param encode error: `, param);
                            return param;
                        }
                        return encodeURI(param);
                    }
                    let parmas = {
                        paramStr: JSON.stringify({
                            "questproCode": "word", "questtempCode": "92fb3a70b17d41f08a1602d1412455ca",
                            "memberName": memberName, "memberCode": memberCode, "userName": this.sqlxr, "userCode": this.lxrsjh,
                            "questtempName": "金融服务预约", "questtempType": "1",
                            "qtQuestuserValueDomainList":
                                [{
                                    "questtempListCode": "03", "questproCode": "word",
                                    "questtempListName": "申请公司", "questuserValueValue": this.qymc,
                                    "questproType": "2"
                                },
                                {
                                    "questtempListCode": "01", "questproCode": "word",
                                    "questtempListName": "申请联系人", "questuserValueValue": this.sqlxr,
                                    "questproType": "2"
                                }, {
                                    "questtempListCode": "04", "questproCode": "phone",
                                    "questtempListName": "联系电话", "questuserValueValue": this.lxrsjh,
                                    "questproType": "3"
                                },
                                {
                                    "questtempListCode": "02", "questproCode": "word", "questtempListName": "申请金额(元)",
                                    "questuserValueValue": this.qwsqed,
                                    "questproType": "2"
                                }]
                        })
                    }
                    // Get Uri from Config as URL
                    const uri = new URLSearchParams(parmas);
                    // Loop Uri
                    for (let value of uri.values()) {
                        value = encode(value);
                    }
                    if (this.qymc == '') {
                        this.s1 = true
                    }
                    if (this.sqlxr == '') {
                        this.s2 = true
                    }
                    if (this.lxrsjh == '') {
                        this.s3 = true
                    }
                    if (this.qwsqed <= 0) {
                        this.s4 = true
                    }
                    if (this.sqlxr != '' && this.qymc != '' && this.lxrsjh != '' && this.lxrsjh.length == 11 && this.qwsqed >= 0) {
                        axios.post('https://appshop.saas.qjclouds.com/web/qt/Questuser/saveQuestuser.json',
                            uri,
                            {
                                headers: {
                                    // 'Content-Type': 'application/json;charset=UTF-8',
                                    // 'Content-Type': 'application/x-www-form-urlencoded',
                                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                                    'saas-Agent': 'Windows NT,Macintosh',
                                    // 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0'
                                }
                            }
                        ).then((res) => {
                            console.log('申请修改:', res);
                            if (res.data.success === true) {
                                this.$message({
                                    message: '已提交修改',
                                    dangerouslyUseHTMLString: true,
                                    duration: 1000,
                                    type: 'success'
                                })
                            } else {
                                this.$message({
                                    message: '修改失败',
                                    dangerouslyUseHTMLString: true,
                                    duration: 1000,
                                    type: 'warning'
                                })
                            }
                        }).catch((err) => {
                            this.$message.error(err);
                        })
                    }
                },
                // 关闭小叉叉
                closeisshowsuccess() {
                    this.isshowsuccess = false
                },
                // 屏幕自适应
                checkScreenWidth() {
                    var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                    if (screenWidth <= 568) {
                        console.log("当前屏幕是手机屏幕");
                        this.isshowpc = false
                    } else {
                        console.log("当前屏幕不是手机屏幕");
                        this.isshowpc = true
                    }
                },
                //立即进入移动端
                lijiintophone() {
                    this.isintophone = false
                    document.getElementById('phonebigdiv').style.height = '145vh'
                }
            },
            watch: {
                qymc: function (newQuestion, oldQuestion) {
                    if (this.qymc == '') {
                        this.s1 = true
                    } else {
                        this.s1 = false
                    }
                },
                sqlxr: function (newQuestion, oldQuestion) {
                    if (this.sqlxr == '') {
                        this.s2 = true
                    } else {
                        this.s2 = false
                    }
                },
                lxrsjh: function (newQuestion, oldQuestion) {
                    if (this.lxrsjh == '' || (this.lxrsjh && this.lxrsjh.length !== 11)) {
                        this.s3 = true
                    } else {
                        this.s3 = false
                    }
                },
                qwsqed: function (newQuestion, oldQuestion) {
                    if (this.qwsqed <= 0) {
                        this.s4 = true
                    } else {
                        this.s4 = false
                    }
                }
            },
        }) 
    </script>
</body>

</html>